<template>
  <div class="container">
    <div class="titleImg"></div>
    <div class="content">
      <div class="share">
        <h3>
          <i class="iconLeftym"></i>
          <span>成功邀请以为好友挖矿可得</span>
          <i class="iconRightym"></i>
        </h3>
        <h4><span>5-50</span><em>服豆</em></h4>
        <div class="btns">
          <a href="javascript:;" @click="shareIt('qrCode')" class="btn red">分享二维码</a>
          <a href="javascript:;" @click="shareIt('link')" class="btn">分享链接</a>
        </div>
      </div>
      <div class="shareList">
        <h3>您成功邀请的{{statistics.total || 0}}名好友共帮您挖了 </h3>
        <h4><span>{{(statistics.awardSum && (statistics.awardSum/100000000).toFixed(2)) || 0}}</span><em>服豆</em></h4>
        <div class="sumlist">
          <div class="item" v-for="(item, index) in clist" :key="index">
            <div class="hadeImg">
              <img :src="item.uid ? 'https://cj-pub.obs.myhwclouds.com/header/' + item.uid :'../../../static/img/headimg.jpg'" alt="">
            </div>
            <div class="name">{{item.inviteUser.nick}}</div>
            <time>+{{(item.award && (item.award/100000000).toFixed(2)) || 0}}服豆</time>
          </div>
        </div>
        <h5><router-link to="/invitation">查看更多我邀请的用户</router-link></h5>
      </div>
      <div class="strategy">
        <div class="title">
          <img src="../../assets/image/strategy.png" alt="">
        </div>
        <h4>1.挖矿攻略文案挖矿攻略文案挖矿攻略文案挖矿攻略文 案挖矿攻略文案。</h4>
        <h4>1.挖矿攻略文案挖矿攻略文案挖矿攻略文案挖矿攻略文 案挖矿攻略文案。</h4>
        <h4>1.挖矿攻略文案挖矿攻略文案挖矿攻略文案挖矿攻略文 案挖矿攻略文案。</h4>
      </div>
    </div>
  </div>
</template>
<script>
  import cookie from '../../plugin/cookie'
  export default {
  name: 'HelloWorld',
  data () {
    return {
      statistics: {},
      clist: [],
      token: '',
      tokens: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJMaXV1SG9uZyIsImF1ZCI6IjEwNDE3OTQ0MjkyOTMxNjY1OTIiLCJuYmYiOjE1NDUxMjM0MTgsInJvbGVzIjoiVVNFUixVU0VSX1BFIiwiaXNzIjoidGIuY24iLCJpZCI6IjEwNDE3OTQ0MjkyOTMxNjY1OTIiLCJleHAiOjE1NjA2NzU0MTgsImlhdCI6MTU0NTEyMzQxOH0.Ys8zU52kMceFyr4hXa-N8l95cUd58VcmRIwbAxXY9-A'
    }
  },
  mounted () {
    document.title = '分享';
    window.getToken = this.getToken
    this.getToken(this.tokens)
    if (cookie.get('token')) {
      this.getToken(cookie.get('token'))
    }
  },
  methods: {
    getToken (token) {
      this.token = token
      console.log(cookie)
      cookie.set('token', token)
      this.start(token)
    },
    /**
     * @deprecated 分页查询
     */
    shareIt (btn) {
      let data = {
        btn,
        url: window.location.origin + '/phone'
      }
      if (this.isMobileDevice() === 0) {
        window.webkit.messageHandlers.shareIt.postMessage(JSON.stringify(data));
      } else {
        window.App.shareIt(JSON.stringify(data))
      }
    },
    start (token) {
      this.$fetch({
        url: '/crm/invites?pageNo=1&pageSize=3',
        headers: {
          'Authorization': token
        }
      }).then(res => {
        this.clist = res.data
      }).catch(res => {
        this.$tipMessage(res.message);
      })

      /**
       * @deprecated 统计接口
       */
      this.$fetch({
        url: '/crm/invite/mytotal',
        headers: {
          'Authorization': token
        }
      }).then(res => {
        this.statistics = res.data
      })
    }
  }
}
</script>
<style scoped lang='less' type="text/less" rel="stylesheet/less">
.yt-textEll{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.iconLeftym{
  display: inline-block;
  width: .37rem;
  height: .53rem;
  background: url("../../assets/image/leftym.png") no-repeat 0 0;
  background-size: 100%;
}
.iconRightym{
  display: inline-block;
  width: .37rem;
  height: .53rem;
  background: url("../../assets/image/rightym.png") no-repeat 0 0;
  background-size: 100%;
}
.titleImg{
  width: 7.5rem;
  height: 7.01rem;
  background: url("../../assets/image/sharebg.jpg") no-repeat 0 0;
  background-size: 7.5rem 7.01rem;;
}
.container{
  background: #ce332f;
}
.content{
  padding: 0 .32rem;
  .share{
    width: 6.86rem;
    height: 2.5rem;
    background: #fff;
    margin-top: -.6rem;
    padding: .2rem 0;
    border-radius: .08rem;
    h3{
      font-size: .32rem;
      color: #f13535;
      display: flex;
      justify-content: center;
      span{
        margin: 0 .2rem;
      }
    }
    h4{
      text-align: center;
      font-size: .48rem;
      color: #f13535;
      margin-top: .1rem;
      span{
        font-size: .48rem;
      }
      em{
        font-weight: 400;
        margin-left: .1rem;
        font-size: .24rem;
        font-style: normal;
      }
    }
    .btns{
      margin-top: .4rem;
      display: flex;
      justify-content: space-around;
      a{
        text-align: center;
        width: 2.95rem;
        height: .72rem;
        font-size: .28rem;
        color: #f13535;
        border: 1px solid #f13535;
        text-decoration: none;
        border-radius: .08rem;
        display: block;
        line-height: .72rem;
        &.red{
          background: #f13535;
          color: #fff;
        }
      }
    }
  }
  .shareList{
    width: 6.86rem;
    /*height: 5.37rem;*/
    background: #fff;
    margin-top: .32rem;
    border-top: .1rem solid #f13535;
    border-radius: 0 0 .08rem .08rem;
    h3{
      font-size: .32rem;
      color: #333333;
      font-weight: 400;
      text-align: center;
      margin-top: .3rem;
    }
    h4{
      text-align: center;
      font-size: .48rem;
      color: #f13535;
      margin-top: .1rem;
      span{
        font-size: .48rem;
      }
      em{
        font-weight: 400;
        margin-left: .1rem;
        font-size: .24rem;
        font-style: normal;
      }
    }
    .sumlist{
      margin-top: .2rem;
      padding: 0 .32rem;
      .item{
        padding: .32rem 0;
        border-bottom: 1px solid #f0f0f0;
        width:6.22rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 0;
        .hadeImg{
          width: .72rem;
          height: .72rem;
          border-radius: 50%;
          img{
            width: .72rem;
            height: .72rem;
            border-radius: 50%;
          }
        }
        .name{
          width: 2.6rem;
          padding-left: .2rem;
          font-size: .32rem;
          color: #333333;
          .yt-textEll;
        }
        time{
          width: 2.6rem;
          text-align: right;
          font-size: .32rem;
          color: #F13535;
          .yt-textEll;
        }
      }
    }
    h5{
      font-size: .28rem;
      color: #F13535;
      font-weight: 400;
      text-align: center;
      line-height: .9rem;
      a{
        display: block;
        color: #f13535;
        text-decoration: none;
      }
    }
  }
  .strategy{
    font-size: 0;
    margin-top: .64rem;
    padding-bottom: .2rem;
    .title{
      width: 2.58rem;
      height: .34rem;
      margin: auto auto .32rem auto;
      img{
        width: 2.58rem;
        height: .34rem;
      }
    }
    h4{
      margin-bottom: .2rem;
      font-size: .28rem;
      color: #fff;
      line-height: .42rem;
    }
  }
}
</style>
